<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="软件名称" prop="softwareName">
        <el-input v-model="form.softwareName" placeholder="请输入标签"></el-input>
      </el-form-item>
      <el-form-item label="图标地址" prop="value">
        <el-input v-model="form.softwareImage" placeholder="请输入标签值">
        </el-input>
        <el-upload v-model:file-list="fileList" class="upload-demo" :headers="{ Authorization: store.state.user.token }"
                   :action="baseURL + 'file/upload/uploadImage'" multiple :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
          <el-button type="primary">Click to upload</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500KB.
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="软件简述" prop="value">
        <el-input v-model="form.softwareDescription" placeholder="请输入软件简述">
        </el-input>
      </el-form-item>
      <el-form-item label="软件类型" prop="softwareTypeId">
        <el-tree-select style="width:100%" v-model="form.softwareTypeId" :data="menuOptions" check-strictly/>
      </el-form-item>
      <el-form-item label="软件状态" prop="status">
        <el-radio-group v-model="form.softwareStatus" size="small">
          <el-radio-button label="false">关闭</el-radio-button>
          <el-radio-button label="true">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <v-md-editor v-model="form.softwareDetails" height="400px"></v-md-editor>
    </el-form>
  </Layer>
</template>

<script lang="ts" setup>
const baseURL: any = import.meta.env.VITE_BASE_URL
import VMdEditor from '@kangc/v-md-editor';
import type {LayerType} from "@/components/layer/index.vue";
import Layer from "@/components/layer/index.vue";
import {inject, Ref, ref} from "vue";
import type {ElFormItemContext} from "element-plus/lib/el-form/src/token";
import {useStore} from "vuex";
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import {add, update} from "@/api/article/software";
import {getData} from "@/api/article/softwaretype";
import {ElMessage} from "element-plus";
import hljs from 'highlight.js'

const store = useStore();

VMdEditor.use(githubTheme, {
  Hljs: hljs,
});
const props = defineProps({
  layer: {
    type: Object,
    default() {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});
const ruleForm: Ref<ElFormItemContext | null> = ref(null);
const layerDom: Ref<LayerType | null> = ref(null);
const emits = defineEmits(["getTableData"]);
const active: any = inject("active");
let form = ref({
  label: "",
  value: "",
  status: true,
  softwareTypeId: "",
});
const menuOptions = ref([])
const rules = {
  softwareName: [{required: true, message: "请输入软件标题", trigger: "blur"}],
};
init();

function init() {
  // 用于判断新增还是编辑功能
  if (props.layer.row) {
    form.value = JSON.parse(JSON.stringify(props.layer.row)); // 数量量少的直接使用这个转
  } else {
  }
  getData().then(({data}) => {
    // 格式转换
    data.forEach((item: any) => {
      item.value = item.softwareTypeId;
      item.label = item.softwareTypeName;
      // children 为空不转换
      if (!item.children) return;
      item.children.forEach((item: any) => {
        item.value = item.softwareTypeId;
        item.label = item.softwareTypeName;
      });
    });
    menuOptions.value = data
  })
  form.value.softwareTypeId = active
}

const submit = () => {
  ruleForm.value.validate((valid: boolean) => {
    if (valid) {
      let params = form.value;
      if (props.layer.row) {
        updateForm(params);
      } else {
        addForm(params);
      }
    } else {
      return false;
    }
  });
};
// 新增提交事件
const addForm = (params: object) => {
  params = {
    softwareId: active.value,
    ...params
  }
  add(params).then((res) => {
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    props.layer.show = false;
    emits("getTableData", true);
  });
};

// 编辑提交事件
const updateForm = (params: object) => {
  update(params).then((res) => {
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    emits("getTableData", false);
  });
};
</script>

<style lang="scss" scoped></style>